import { useState, useEffect } from 'react';
import { Input, Button, Select } from 'antd';
import { cloneDeep } from 'lodash';
import uuid from 'react-uuid';

const OkrFormItem = (props) => {
  const [obj, setObj] = useState();

  useEffect(() => {
    setObj(props.value);
    console.log(props.value, '----values');
  }, []);

  const handleChange = (value) => {
    const newObj = Object.assign({}, obj, { selectValue: value });
    setObj(newObj);
    props.onChange(newObj);
  };
  const handleInput = (e) => {
    const value = e.target.value;
    const newObj = Object.assign({}, obj, { inputValue: value });
    setObj(newObj);
    props.onChange(newObj);
  };
  return (
    <div>
      <Select onChange={handleChange} value={obj?.selectValue}>
        <Select.Option value={'a'}>a</Select.Option>
        <Select.Option value={'b'}>b</Select.Option>
        <Select.Option value="c">c</Select.Option>
      </Select>
      <Input value={obj?.inputValue} onChange={handleInput} />
      <Button onClick={() => props.deleteList(props.k)}>Delete</Button>
    </div>
  );
};

export default OkrFormItem;
